<!DOCTYPE html>
<html lang="en-US">
	
<!-- Mirrored from vkuviewdoc.fsq.pub/js/http.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 21 May 2025 17:31:02 GMT -->
<head>
		<title>Http请求 | uView Vue3.0 横空出世，继承uView1.0意志，再战江湖，风云再起！</title>
		<meta charset="utf-8">
		<script>
		  var _hmt = _hmt || [];
		  (function() {
		    var hm = document.createElement("script");
		    hm.src = "../../hm.baidu.com/hm34bd.js?1d1565dd0782e66106e6a42c79ed2554";
		    var s = document.getElementsByTagName("script")[0]; 
		    s.parentNode.insertBefore(hm, s);
		  })();
		  </script>
		<meta name="description" content="同时支持 Vue3.0 和 Vue2.0，你没看错，现在 uView 支持 Vue3.0 了！（不支持nvue，此版本为uView1.0的分支）">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="keywords" content="vk-uview,uviewVue3.0,uview,uView,uviewui,uview ui,uviewUI,uViewui,uViewUI,uView UI,uni ui,uni UI,uni-app ui框架,uni-app UI框架,uniapp ui,ui,UI框架,uniapp ui框架,uniapp UI">
		<link rel="preload" href="../assets/css/0.styles.61168ff3.css" as="style"><link rel="preload" href="../assets/js/app.06a5b7ec.js" as="script"><link rel="preload" href="../assets/js/3.b1cc55a0.js" as="script"><link rel="preload" href="../assets/js/4.4b844322.js" as="script"><link rel="preload" href="../assets/js/135.c78b3861.js" as="script"><link rel="preload" href="../assets/js/9.ba52e2b0.js" as="script"><link rel="preload" href="../assets/js/6.2c513bee.js" as="script"><link rel="prefetch" href="../assets/js/1.98a9916e.js"><link rel="prefetch" href="../assets/js/10.038f08bd.js"><link rel="prefetch" href="../assets/js/100.a4e49f4f.js"><link rel="prefetch" href="../assets/js/101.5bb80e81.js"><link rel="prefetch" href="../assets/js/102.341da24c.js"><link rel="prefetch" href="../assets/js/103.59b833cd.js"><link rel="prefetch" href="../assets/js/104.a145c535.js"><link rel="prefetch" href="../assets/js/105.c8fea0c4.js"><link rel="prefetch" href="../assets/js/106.d1e658a7.js"><link rel="prefetch" href="../assets/js/107.5f95aed3.js"><link rel="prefetch" href="../assets/js/108.8d2b2544.js"><link rel="prefetch" href="../assets/js/109.10c99e03.js"><link rel="prefetch" href="../assets/js/11.8e74d8b9.js"><link rel="prefetch" href="../assets/js/110.4a7e9307.js"><link rel="prefetch" href="../assets/js/111.773e8680.js"><link rel="prefetch" href="../assets/js/112.c7465195.js"><link rel="prefetch" href="../assets/js/113.b86e8be8.js"><link rel="prefetch" href="../assets/js/114.9ba8246a.js"><link rel="prefetch" href="../assets/js/115.48e5c3e4.js"><link rel="prefetch" href="../assets/js/116.623d8a73.js"><link rel="prefetch" href="../assets/js/117.d9fc756d.js"><link rel="prefetch" href="../assets/js/118.668a7d9f.js"><link rel="prefetch" href="../assets/js/119.6ca5a6b7.js"><link rel="prefetch" href="../assets/js/12.1490d9ad.js"><link rel="prefetch" href="../assets/js/120.8008a6be.js"><link rel="prefetch" href="../assets/js/121.29c37c36.js"><link rel="prefetch" href="../assets/js/122.00c188a8.js"><link rel="prefetch" href="../assets/js/123.22e24add.js"><link rel="prefetch" href="../assets/js/124.e5837e2d.js"><link rel="prefetch" href="../assets/js/125.bd96786c.js"><link rel="prefetch" href="../assets/js/126.e58693e0.js"><link rel="prefetch" href="../assets/js/127.7df2a7cb.js"><link rel="prefetch" href="../assets/js/128.46d0d44f.js"><link rel="prefetch" href="../assets/js/129.533ad2e4.js"><link rel="prefetch" href="../assets/js/13.26869a5e.js"><link rel="prefetch" href="../assets/js/130.33870daa.js"><link rel="prefetch" href="../assets/js/131.6ed8ceeb.js"><link rel="prefetch" href="../assets/js/132.ddabb1d9.js"><link rel="prefetch" href="../assets/js/133.9ec99fba.js"><link rel="prefetch" href="../assets/js/134.ddf9fd84.js"><link rel="prefetch" href="../assets/js/136.9f35dad7.js"><link rel="prefetch" href="../assets/js/137.f76e23c3.js"><link rel="prefetch" href="../assets/js/138.527154ce.js"><link rel="prefetch" href="../assets/js/139.20fc60a7.js"><link rel="prefetch" href="../assets/js/14.f7c8080a.js"><link rel="prefetch" href="../assets/js/140.94a3c889.js"><link rel="prefetch" href="../assets/js/141.dbec7630.js"><link rel="prefetch" href="../assets/js/142.01e40518.js"><link rel="prefetch" href="../assets/js/143.e69db0a4.js"><link rel="prefetch" href="../assets/js/144.6b44c549.js"><link rel="prefetch" href="../assets/js/145.be0da9a2.js"><link rel="prefetch" href="../assets/js/146.cf66d7a5.js"><link rel="prefetch" href="../assets/js/147.0d33398d.js"><link rel="prefetch" href="../assets/js/148.7ec3725c.js"><link rel="prefetch" href="../assets/js/149.94b68d3b.js"><link rel="prefetch" href="../assets/js/15.9c539d25.js"><link rel="prefetch" href="../assets/js/150.a3cb5d67.js"><link rel="prefetch" href="../assets/js/151.353415e1.js"><link rel="prefetch" href="../assets/js/152.a0e625f0.js"><link rel="prefetch" href="../assets/js/153.9f9ff9df.js"><link rel="prefetch" href="../assets/js/154.3926195f.js"><link rel="prefetch" href="../assets/js/155.4ff0eab8.js"><link rel="prefetch" href="../assets/js/156.30421ecd.js"><link rel="prefetch" href="../assets/js/16.9311470f.js"><link rel="prefetch" href="../assets/js/17.1d2427af.js"><link rel="prefetch" href="../assets/js/18.9f71dea7.js"><link rel="prefetch" href="../assets/js/19.2b0b9da7.js"><link rel="prefetch" href="../assets/js/20.4e7fd7f2.js"><link rel="prefetch" href="../assets/js/21.eeb64d6d.js"><link rel="prefetch" href="../assets/js/22.eeed70a0.js"><link rel="prefetch" href="../assets/js/23.ebadd966.js"><link rel="prefetch" href="../assets/js/24.623888d6.js"><link rel="prefetch" href="../assets/js/25.997678dc.js"><link rel="prefetch" href="../assets/js/26.bdc2a6fc.js"><link rel="prefetch" href="../assets/js/27.14956264.js"><link rel="prefetch" href="../assets/js/28.3e836b17.js"><link rel="prefetch" href="../assets/js/29.88996b95.js"><link rel="prefetch" href="../assets/js/30.26760ff7.js"><link rel="prefetch" href="../assets/js/31.169925f0.js"><link rel="prefetch" href="../assets/js/32.fc848ffd.js"><link rel="prefetch" href="../assets/js/33.4a7b20b5.js"><link rel="prefetch" href="../assets/js/34.080a5b2d.js"><link rel="prefetch" href="../assets/js/35.5664384b.js"><link rel="prefetch" href="../assets/js/36.e6f2d7c1.js"><link rel="prefetch" href="../assets/js/37.7fffb245.js"><link rel="prefetch" href="../assets/js/38.2a818c4b.js"><link rel="prefetch" href="../assets/js/39.b75d1d1f.js"><link rel="prefetch" href="../assets/js/40.eebb261c.js"><link rel="prefetch" href="../assets/js/41.f590ad3d.js"><link rel="prefetch" href="../assets/js/42.3a5a9ad1.js"><link rel="prefetch" href="../assets/js/43.315af682.js"><link rel="prefetch" href="../assets/js/44.e699cfc9.js"><link rel="prefetch" href="../assets/js/45.070488b1.js"><link rel="prefetch" href="../assets/js/46.29f9b10c.js"><link rel="prefetch" href="../assets/js/47.a49c9691.js"><link rel="prefetch" href="../assets/js/48.901960ce.js"><link rel="prefetch" href="../assets/js/49.90f26de6.js"><link rel="prefetch" href="../assets/js/5.1822a725.js"><link rel="prefetch" href="../assets/js/50.d98ea474.js"><link rel="prefetch" href="../assets/js/51.7e81edb0.js"><link rel="prefetch" href="../assets/js/52.ae744cc4.js"><link rel="prefetch" href="../assets/js/53.a87579ea.js"><link rel="prefetch" href="../assets/js/54.09cf1cd4.js"><link rel="prefetch" href="../assets/js/55.8dbe32a9.js"><link rel="prefetch" href="../assets/js/56.4cc4e86e.js"><link rel="prefetch" href="../assets/js/57.5fa9755d.js"><link rel="prefetch" href="../assets/js/58.8a511947.js"><link rel="prefetch" href="../assets/js/59.7f699905.js"><link rel="prefetch" href="../assets/js/60.5cd6bf05.js"><link rel="prefetch" href="../assets/js/61.8e3a5252.js"><link rel="prefetch" href="../assets/js/62.c196204b.js"><link rel="prefetch" href="../assets/js/63.cf346896.js"><link rel="prefetch" href="../assets/js/64.0525bb5d.js"><link rel="prefetch" href="../assets/js/65.2d0a71fc.js"><link rel="prefetch" href="../assets/js/66.7155e206.js"><link rel="prefetch" href="../assets/js/67.40077362.js"><link rel="prefetch" href="../assets/js/68.5bf58e97.js"><link rel="prefetch" href="../assets/js/69.d955f75b.js"><link rel="prefetch" href="../assets/js/7.1d1f1c24.js"><link rel="prefetch" href="../assets/js/70.a8cce98b.js"><link rel="prefetch" href="../assets/js/71.da703543.js"><link rel="prefetch" href="../assets/js/72.c04dfa52.js"><link rel="prefetch" href="../assets/js/73.d07ef280.js"><link rel="prefetch" href="../assets/js/74.8461f6a0.js"><link rel="prefetch" href="../assets/js/75.b4e8bf21.js"><link rel="prefetch" href="../assets/js/76.2df0e4fa.js"><link rel="prefetch" href="../assets/js/77.80fba507.js"><link rel="prefetch" href="../assets/js/78.167eb1f2.js"><link rel="prefetch" href="../assets/js/79.8de07f16.js"><link rel="prefetch" href="../assets/js/8.70b4860e.js"><link rel="prefetch" href="../assets/js/80.62ae9ff8.js"><link rel="prefetch" href="../assets/js/81.6d66b374.js"><link rel="prefetch" href="../assets/js/82.3200cf78.js"><link rel="prefetch" href="../assets/js/83.1d9c3fce.js"><link rel="prefetch" href="../assets/js/84.d9f947a9.js"><link rel="prefetch" href="../assets/js/85.85a4c72a.js"><link rel="prefetch" href="../assets/js/86.93c948f9.js"><link rel="prefetch" href="../assets/js/87.468468cc.js"><link rel="prefetch" href="../assets/js/88.e5fe3f13.js"><link rel="prefetch" href="../assets/js/89.724b1038.js"><link rel="prefetch" href="../assets/js/90.16fb68a1.js"><link rel="prefetch" href="../assets/js/91.338ca55d.js"><link rel="prefetch" href="../assets/js/92.508f7300.js"><link rel="prefetch" href="../assets/js/93.50d169d1.js"><link rel="prefetch" href="../assets/js/94.54461a32.js"><link rel="prefetch" href="../assets/js/95.8f712236.js"><link rel="prefetch" href="../assets/js/96.4c8d5f01.js"><link rel="prefetch" href="../assets/js/97.da347ee4.js"><link rel="prefetch" href="../assets/js/98.94680b58.js"><link rel="prefetch" href="../assets/js/99.7d895609.js">
		<link rel="stylesheet" href="../assets/css/0.styles.61168ff3.css">
		<script>
			var _hmt = _hmt || [];
			(function() {
				var hm = document.createElement("script");
				hm.src = "../../hm.baidu.com/hm81c3.js?43e7eadc8f61e1e064906952da7d51f0";
				var s = document.getElementsByTagName("script")[0];
				s.parentNode.insertBefore(hm, s);
			})();
		</script>
	</head>
	<body>
		<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="../index.html" class="home-link router-link-active"><img src="../common/logo.png" alt="uView Vue3.0 横空出世，继承uView1.0意志，再战江湖，风云再起！" class="logo"> <span class="site-name can-hide">uView</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="../guide/demo.html" class="nav-link">
  指南
</a></div><div class="nav-item"><a href="../components/intro.html" class="nav-link">
  组件
</a></div><div class="nav-item"><a href="intro.html" class="nav-link">
  JS
</a></div><div class="nav-item"><a href="../layout/intro.html" class="nav-link">
  模板
</a></div><div class="nav-item"><a href="../components/resource.html" class="nav-link">
  资源
</a></div><div class="nav-item"><a href="https://ext.dcloud.net.cn/plugin?id=6692" target="_blank" rel="noopener noreferrer" class="nav-link external">
  插件市场
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://gitee.com/vk-uni/vk-uview-ui" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="DCloud插件市场" class="dropdown-title"><span class="title">VK其他插件</span> <span class="arrow down"></span></button> <button type="button" aria-label="DCloud插件市场" class="mobile-dropdown-title"><span class="title">VK其他插件</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://ext.dcloud.net.cn/plugin?id=2204" target="_blank" rel="noopener noreferrer" class="nav-link external">
  vk-unicloud-router（client端）
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://ext.dcloud.net.cn/plugin?id=5043" target="_blank" rel="noopener noreferrer" class="nav-link external">
  vk-unicloud-admin（admin端）
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://ext.dcloud.net.cn/plugin?id=5642" target="_blank" rel="noopener noreferrer" class="nav-link external">
  vk-uni-pay（统一支付）
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://ext.dcloud.net.cn/plugin?id=2848" target="_blank" rel="noopener noreferrer" class="nav-link external">
  vk-data-goods-sku-popup（sku组件）
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://ext.dcloud.net.cn/plugin?id=6692" target="_blank" rel="noopener noreferrer" class="nav-link external">
  vk-uview-ui（uView Vue3.0）
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://ext.dcloud.net.cn/plugin?id=6158" target="_blank" rel="noopener noreferrer" class="nav-link external">
  vk-redis
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://ext.dcloud.net.cn/plugin?id=6089" target="_blank" rel="noopener noreferrer" class="nav-link external">
  vk-unicloud数据库一键搬家工具
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://ext.dcloud.net.cn/plugin?id=6663" target="_blank" rel="noopener noreferrer" class="nav-link external">
  vk-hbx插件（开发辅助工具）
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://ext.dcloud.net.cn/publisher?id=164406" target="_blank" rel="noopener noreferrer" class="nav-link external">
  查看更多
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="原版uView" class="dropdown-title"><span class="title">原版uView</span> <span class="arrow down"></span></button> <button type="button" aria-label="原版uView" class="mobile-dropdown-title"><span class="title">原版uView</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://v1.uviewui.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  1.X
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://uviewui.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  2.X
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <div><aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="../guide/demo.html" class="nav-link">
  指南
</a></div><div class="nav-item"><a href="../components/intro.html" class="nav-link">
  组件
</a></div><div class="nav-item"><a href="intro.html" class="nav-link">
  JS
</a></div><div class="nav-item"><a href="../layout/intro.html" class="nav-link">
  模板
</a></div><div class="nav-item"><a href="../components/resource.html" class="nav-link">
  资源
</a></div><div class="nav-item"><a href="https://ext.dcloud.net.cn/plugin?id=6692" target="_blank" rel="noopener noreferrer" class="nav-link external">
  插件市场
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://gitee.com/vk-uni/vk-uview-ui" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="DCloud插件市场" class="dropdown-title"><span class="title">VK其他插件</span> <span class="arrow down"></span></button> <button type="button" aria-label="DCloud插件市场" class="mobile-dropdown-title"><span class="title">VK其他插件</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://ext.dcloud.net.cn/plugin?id=2204" target="_blank" rel="noopener noreferrer" class="nav-link external">
  vk-unicloud-router（client端）
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://ext.dcloud.net.cn/plugin?id=5043" target="_blank" rel="noopener noreferrer" class="nav-link external">
  vk-unicloud-admin（admin端）
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://ext.dcloud.net.cn/plugin?id=5642" target="_blank" rel="noopener noreferrer" class="nav-link external">
  vk-uni-pay（统一支付）
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://ext.dcloud.net.cn/plugin?id=2848" target="_blank" rel="noopener noreferrer" class="nav-link external">
  vk-data-goods-sku-popup（sku组件）
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://ext.dcloud.net.cn/plugin?id=6692" target="_blank" rel="noopener noreferrer" class="nav-link external">
  vk-uview-ui（uView Vue3.0）
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://ext.dcloud.net.cn/plugin?id=6158" target="_blank" rel="noopener noreferrer" class="nav-link external">
  vk-redis
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://ext.dcloud.net.cn/plugin?id=6089" target="_blank" rel="noopener noreferrer" class="nav-link external">
  vk-unicloud数据库一键搬家工具
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://ext.dcloud.net.cn/plugin?id=6663" target="_blank" rel="noopener noreferrer" class="nav-link external">
  vk-hbx插件（开发辅助工具）
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://ext.dcloud.net.cn/publisher?id=164406" target="_blank" rel="noopener noreferrer" class="nav-link external">
  查看更多
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="原版uView" class="dropdown-title"><span class="title">原版uView</span> <span class="arrow down"></span></button> <button type="button" aria-label="原版uView" class="mobile-dropdown-title"><span class="title">原版uView</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://v1.uviewui.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  1.X
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://uviewui.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  2.X
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>开发指南</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="intro.html" class="sidebar-link">介绍</a></li><li><a href="fastUse.html" class="sidebar-link">便捷工具</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>网络</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="http.html" aria-current="page" class="active sidebar-link">Http请求</a></li><li><a href="apiManage.html" class="sidebar-link">API集中管理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具库</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="debounce.html" class="sidebar-link">节流防抖</a></li><li><a href="deepClone.html" class="sidebar-link">对象深度克隆</a></li><li><a href="deepMerge.html" class="sidebar-link">对象深度合并</a></li><li><a href="time.html" class="sidebar-link">时间格式化</a></li><li><a href="route.html" class="sidebar-link">路由跳转</a></li><li><a href="randomArray.html" class="sidebar-link">数组乱序</a></li><li><a href="guid.html" class="sidebar-link">全局唯一标识符</a></li><li><a href="colorSwitch.html" class="sidebar-link">颜色转换</a></li><li><a href="color.html" class="sidebar-link">颜色值</a></li><li><a href="queryParams.html" class="sidebar-link">对象转URL参数</a></li><li><a href="test.html" class="sidebar-link">规则校验</a></li><li><a href="md5.html" class="sidebar-link">md5加密</a></li><li><a href="random.html" class="sidebar-link">随机数值</a></li><li><a href="trim.html" class="sidebar-link">去除空格</a></li><li><a href="getRect.html" class="sidebar-link">节点布局信息</a></li><li><a href="mpShare.html" class="sidebar-link">小程序分享</a></li></ul></section></li></ul> </aside></div> <main class="page"> <div class="theme-default-content content__default"><h2 id="http请求"><a href="#http请求" class="header-anchor">#</a> Http请求</h2> <div class="demo-model" data-v-05b12073><div class="model-content" data-v-05b12073><iframe scrolling="auto" frameborder="0" src="https://uviewdoc.fsq.pub/#/pages/library/http/index" id="demo-modal" class="iframe" data-v-05b12073></iframe></div></div> <p><strong>特别注意</strong></p> <p><code>vue3</code> 中需要把 <code>Vue.prototype</code> 替换成 <code>Vue.config.globalProperties</code></p> <p>该插件适用于一般的请求场景，只支持<code>post</code>、<code>get</code>、<code>put</code>和<code>delete</code>请求，目前不适用于其他的请求形式，比如上传，下载等。插件定位为
小而美，而不是大而全，目标是切合实际，开箱即用。</p> <h3 id="平台差异说明"><a href="#平台差异说明" class="header-anchor">#</a> 平台差异说明</h3> <table><thead><tr><th style="text-align:center;">App</th> <th style="text-align:center;">H5</th> <th style="text-align:center;">微信小程序</th> <th style="text-align:center;">支付宝小程序</th> <th style="text-align:center;">百度小程序</th> <th style="text-align:center;">头条小程序</th> <th style="text-align:center;">QQ小程序</th></tr></thead> <tbody><tr><td style="text-align:center;">√</td> <td style="text-align:center;">√</td> <td style="text-align:center;">√</td> <td style="text-align:center;">√</td> <td style="text-align:center;">√</td> <td style="text-align:center;">√</td> <td style="text-align:center;">√</td></tr></tbody></table> <p>由于某些小程序平台的限制：</p> <ul><li>delete请求，不支持支付宝和头条小程序(HX2.6.15)</li> <li>put请求，不支持支付宝小程序(HX2.6.15)</li></ul> <h3 id="基本使用"><a href="#基本使用" class="header-anchor">#</a> 基本使用</h3> <h4 id="get-post-put-delete-url-params-header-then-res-catch-res"><a href="#get-post-put-delete-url-params-header-then-res-catch-res" class="header-anchor">#</a> get | post | put | delete(url, params, header).then(res =&gt; {}).catch(res =&gt; {})</h4> <ul><li><code>url</code> &lt;String&gt; 请求的URL，可以完整的URL(http开头)，或者是路径的一部分，这时会自动拼接上<code>baseUrl</code>(一般为api的域名部分)</li> <li><code>params</code> &lt;Object&gt; 请求的参数，对象形式，如&quot;{name: 'lisa', age: 23}&quot;，该参数是可选的</li> <li><code>header</code> &lt;Object&gt; 请求的header，对象形式，如果token等字段，建议通过配置写入，该参数是可选的</li></ul> <p><code>get</code>和<code>post</code>都挂载在<code>$u</code>对象下，其中<code>get</code>和<code>post</code>使用方法完全一致，只是一个为<code>this.$u.get</code>，一个为<code>this.$u.post</code>,使用如下：</p> <p>一般来说，只在<code>then</code>中接收返回值即可，<code>catch</code>无特殊情况，无需编写和理会，因为如果服务端返回的不是200状态，插件内部会弹出model提示</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
	<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
		<span class="token function">onLoad</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
			<span class="token comment">// 不带header</span>
			<span class="token keyword">this</span><span class="token punctuation">.</span>$u<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span><span class="token string">'http://www.example.com'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
				<span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
				<span class="token literal-property property">menu</span><span class="token operator">:</span> <span class="token number">1</span>
			<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
				console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span><span class="token punctuation">;</span>
			<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
			
			<span class="token comment">// 带上header(对象形式)，由于header为第三个参数，如果不需要请求参数，第二个参数传一个空对象&quot;{ }&quot;即可</span>
			<span class="token keyword">this</span><span class="token punctuation">.</span>$u<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'http://www.example.com'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
				<span class="token literal-property property">token</span><span class="token operator">:</span> <span class="token string">'xyz'</span>
			<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
				console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span><span class="token punctuation">;</span>
			<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
	<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h3 id="配置参数"><a href="#配置参数" class="header-anchor">#</a> 配置参数</h3> <p>配置参数的时候，需要调用<code>$u.http.setConfig()</code>方法，传递一个对象作为参数。</p> <ul><li>强烈建议在此配置统一请求的<code>baseUrl</code></li> <li>同时看情况是否开启(默认关闭)请求加载中的loading，该功能需要设置一个时间(默认800ms)，如果超过此时间，请求尚未返回，则显示一个loading，直至返回后，取消loading。</li></ul> <p>说明：请求loading超时时间的意义为，一般情况下，请求会在几十毫秒返回，时间极短，无需loading，如果显示loading，会导致
动画一闪而过，体验不好。如果用户网络慢，或者服务器堵塞，可能一个请求需要几秒钟，这时请求达到设定时间(800ms)，
就会显示loading，几秒钟后请求返回，loading消失。</p> <br> <div class="custom-block tip"><p class="custom-block-title">提示</p> <p>uView在<strong>1.1.0</strong>版本后，建议将拦截器内容部分，写入到独立的外部JS文件中，而不是写在App.vue中，这样有更好的可读性，可维护性。<br>
uView已经为用户考虑好了所有的情况，并详细指导您如何在外部JS中引用vuex变量以及Vue的<code>this</code>实例等。<br>
建议在根目录下新建<code>/common/http.interceptor.js</code>文件，也即创建<code>common</code>目录(如果没有的话)，再创建<code>http.interceptor.js</code>文件，将拦截器相关代码写在里面。</p></div> <br> <p>以下为可选的配置参数，<strong>这个配置是一次配置，全局通用的</strong>。</p> <div class="language-js extra-class"><pre class="language-js"><code>config <span class="token operator">=</span> <span class="token punctuation">{</span>
	<span class="token literal-property property">baseUrl</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span> <span class="token comment">// 请求的本域名</span>
	<span class="token literal-property property">method</span><span class="token operator">:</span> <span class="token string">'POST'</span><span class="token punctuation">,</span>
	<span class="token comment">// 设置为json，返回后会对数据进行一次JSON.parse()</span>
	<span class="token literal-property property">dataType</span><span class="token operator">:</span> <span class="token string">'json'</span><span class="token punctuation">,</span>
	<span class="token literal-property property">showLoading</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 是否显示请求中的loading</span>
	<span class="token literal-property property">loadingText</span><span class="token operator">:</span> <span class="token string">'请求中...'</span><span class="token punctuation">,</span> <span class="token comment">// 请求loading中的文字提示</span>
	<span class="token literal-property property">loadingTime</span><span class="token operator">:</span> <span class="token number">800</span><span class="token punctuation">,</span> <span class="token comment">// 在此时间内，请求还没回来的话，就显示加载中动画，单位ms</span>
	<span class="token literal-property property">originalData</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 是否在拦截器中返回服务端的原始数据</span>
	<span class="token literal-property property">loadingMask</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 展示loading的时候，是否给一个透明的蒙层，防止触摸穿透</span>
	<span class="token comment">// 配置请求头信息</span>
	<span class="token literal-property property">header</span><span class="token operator">:</span> <span class="token punctuation">{</span>
		<span class="token string-property property">'content-type'</span><span class="token operator">:</span> <span class="token string">'application/json;charset=UTF-8'</span>
	<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
</code></pre></div><p>具体写法，建议在写在<code>/common/http.interceptor.js</code>(如无此文件夹和文件，请手动创建，一次配置，全局通用)，写完之后，请在根目录的<code>main.js</code>
的<code>new Vue()</code>和<code>app.$mount()</code>之间引入此文件，在<code>new Vue()</code>后面的原因是，外部JS文件需要引用vue的实例，也即<code>this</code>对象，要等<code>main.js</code>中通过<code>new</code>创建了实例之后才能引用。
在<code>app.$mount()</code>之前的原因是，在Vue挂载<code>this</code>实例(也即初始化<code>App.vue</code>)之前配置请求信息，所以在<code>App.vue</code>中也能正常发出请求。</p> <p>以下为在<code>main.js</code>中的引入示例：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// main.js</span>

<span class="token comment">// 此为main.js本身已有内容</span>
<span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token operator">...</span>App
<span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token comment">// http拦截器，此为需要加入的内容，如果不是写在common目录，请自行修改引入路径</span>
<span class="token keyword">import</span> httpInterceptor <span class="token keyword">from</span> <span class="token string">'@/common/http.interceptor.js'</span>
<span class="token comment">// 这里需要写在最后，是为了等Vue创建对象完成，引入&quot;app&quot;对象(也即页面的&quot;this&quot;实例)</span>
Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>httpInterceptor<span class="token punctuation">,</span> app<span class="token punctuation">)</span>

app<span class="token punctuation">.</span><span class="token function">$mount</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre></div><p>下面为配置信息的具体内容：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// common/http.interceptor.js</span>

<span class="token comment">// 这里的Vue为Vue对象(非创建出来的实例)，vm为main.js中“Vue.use(httpInterceptor, app)”这一句的第二个参数，</span>
<span class="token comment">// 为一个Vue的实例，也即每个页面的&quot;this&quot;</span>
<span class="token comment">// 如果需要了解这个install方法是什么，请移步：https://uviewui.com/components/vueUse.html</span>
<span class="token keyword">const</span> <span class="token function-variable function">install</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">Vue<span class="token punctuation">,</span> vm</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
	<span class="token comment">// 此为自定义配置参数，具体参数见上方说明</span>
	<span class="token class-name">Vue</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>$u<span class="token punctuation">.</span>http<span class="token punctuation">.</span><span class="token function">setConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
		<span class="token literal-property property">baseUrl</span><span class="token operator">:</span> <span class="token string">'https://api.example.com'</span><span class="token punctuation">,</span>
		<span class="token literal-property property">loadingText</span><span class="token operator">:</span> <span class="token string">'努力加载中~'</span><span class="token punctuation">,</span>
		<span class="token literal-property property">loadingTime</span><span class="token operator">:</span> <span class="token number">800</span><span class="token punctuation">,</span>
		<span class="token comment">// 设置自定义头部content-type</span>
		<span class="token comment">// header: {</span>
		<span class="token comment">// 	'content-type': 'xxx'</span>
		<span class="token comment">// }</span>
		<span class="token comment">// ......</span>
	<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
	install
<span class="token punctuation">}</span>
</code></pre></div><h3 id="请求拦截和响应拦截-如配置-每次请求都会执行"><a href="#请求拦截和响应拦截-如配置-每次请求都会执行" class="header-anchor">#</a> 请求拦截和响应拦截(如配置，每次请求都会执行)</h3> <p><strong>此两个拦截，是可选配置的</strong></p> <h4 id="何谓请求拦截"><a href="#何谓请求拦截" class="header-anchor">#</a> 何谓请求拦截？</h4> <p>顾名思义，就是在请求发出之前，对请求做一些额外处理，比如对不同api接口，携带不同的<code>header</code>参数，或者(也是最重要)
配置统一的token到<code>header</code>中，这样就不用每次请求，都写token相关的部分到<code>this.$u.post()</code>的第三个请求头参数中，如下：</p> <h4 id="u-http-interceptor-request-config"><a href="#u-http-interceptor-request-config" class="header-anchor">#</a> $u.http.interceptor.request = (config) =&gt; { ... }</h4> <ul><li><code>config</code> &lt;Object&gt; 此<code>config</code>参数，带有header和url属性，header属性是为了添加请求头信息，url属性是为了对某些url进行特别处理</li></ul> <p>一般建议对此进行token的配置，说明：<strong>由于本拦截是每次请求都会调用的，如果在此写入token到header中，即使再次您重新登录，token发生变化，也无需再次调用本拦截</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// common/http.interceptor.js</span>

<span class="token keyword">const</span> <span class="token function-variable function">install</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">Vue<span class="token punctuation">,</span> vm</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
	<span class="token comment">// 此为自定义配置参数，具体参数见上方说明</span>
	<span class="token class-name">Vue</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>$u<span class="token punctuation">.</span>http<span class="token punctuation">.</span><span class="token function">setConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
		<span class="token comment">// ......</span>
	<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
	
	<span class="token comment">// 请求拦截部分，如配置，每次请求前都会执行</span>
	<span class="token class-name">Vue</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>$u<span class="token punctuation">.</span>http<span class="token punctuation">.</span>interceptor<span class="token punctuation">.</span><span class="token function-variable function">request</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">config</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
		<span class="token comment">// 引用token</span>
		<span class="token comment">// 方式一，存放在vuex的token，假设使用了uView封装的vuex方式</span>
		<span class="token comment">// 见：https://uviewui.com/components/globalVariable.html</span>
		<span class="token comment">// config.header.token = vm.token;</span>
		
		<span class="token comment">// 方式二，如果没有使用uView封装的vuex方法，那么需要使用$store.state获取</span>
		<span class="token comment">// config.header.token = vm.$store.state.token;</span>
		
		<span class="token comment">// 方式三，如果token放在了globalData，通过getApp().globalData获取</span>
		<span class="token comment">// config.header.token = getApp().globalData.username;</span>
		
		<span class="token comment">// 方式四，如果token放在了Storage本地存储中，拦截是每次请求都执行的</span>
		<span class="token comment">// 所以哪怕您重新登录修改了Storage，下一次的请求将会是最新值</span>
		<span class="token comment">// const token = uni.getStorageSync('token');</span>
		<span class="token comment">// config.header.token = token;</span>
		config<span class="token punctuation">.</span>header<span class="token punctuation">.</span>Token <span class="token operator">=</span> <span class="token string">'xxxxxx'</span><span class="token punctuation">;</span>
		
		<span class="token comment">// 可以对某个url进行特别处理，此url参数为this.$u.get(url)中的url值</span>
		<span class="token keyword">if</span><span class="token punctuation">(</span>config<span class="token punctuation">.</span>url <span class="token operator">==</span> <span class="token string">'/user/login'</span><span class="token punctuation">)</span> config<span class="token punctuation">.</span>header<span class="token punctuation">.</span>noToken <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
		<span class="token comment">// 最后需要将config进行return</span>
		<span class="token keyword">return</span> config<span class="token punctuation">;</span>
		<span class="token comment">// 如果return一个false值，则会取消本次请求</span>
		<span class="token comment">// if(config.url == '/user/rest') return false; // 取消某次请求</span>
	<span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
	install
<span class="token punctuation">}</span>
</code></pre></div><h4 id="何谓响应拦截"><a href="#何谓响应拦截" class="header-anchor">#</a> 何谓响应拦截？</h4> <p>响应拦截，意味着是在请求返回时，对返回的数据进行一些处理，如不同的状态对应的关系，比如约定状态码200为成功，
则把返回数据返回到<code>this.$u.post().then()</code>的<code>then</code>中，如果为201(约定为token失效，需要登录)，则可以在在拦截中进行toast
提示，并跳转到登录页。</p> <div class="custom-block tip"><p class="custom-block-title">注意</p> <p>响应拦截器中默认返回的是<code>response.data</code>，如果您的需求比较特殊，需要返回<code>response</code>，请在&quot;$u.http.setConfig&quot;配置
<code>originalData</code>为<code>true</code>，如果配置了，服务端返回的&quot;response.statusCode&quot;不为&quot;200&quot;的时候，将不会自动弹出&quot;modal&quot;框，请自行
在响应拦截器中配置相关行为。</p></div> <h4 id="u-http-interceptor-response-res"><a href="#u-http-interceptor-response-res" class="header-anchor">#</a> $u.http.interceptor.response = (res) =&gt; { ... }</h4> <ul><li><code>res</code> &lt;Object&gt; 该参数为服务器返回的数据，具体可打印查看</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// common/http.interceptor.js</span>

<span class="token keyword">const</span> <span class="token function-variable function">install</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">Vue<span class="token punctuation">,</span> vm</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
	<span class="token comment">// 此为自定义配置参数，具体参数见上方说明</span>
	<span class="token class-name">Vue</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>$u<span class="token punctuation">.</span>http<span class="token punctuation">.</span><span class="token function">setConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
		<span class="token comment">// ......</span>
	<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
	
	<span class="token comment">// 请求拦截部分，如配置，每次请求前都会执行，见上方说明</span>
	<span class="token class-name">Vue</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>$u<span class="token punctuation">.</span>http<span class="token punctuation">.</span>interceptor<span class="token punctuation">.</span><span class="token function-variable function">request</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">config</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
		<span class="token comment">// ......</span>
		<span class="token keyword">return</span> config<span class="token punctuation">;</span>
	<span class="token punctuation">}</span>
	
	<span class="token comment">// 响应拦截，如配置，每次请求结束都会执行本方法</span>
	<span class="token class-name">Vue</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>$u<span class="token punctuation">.</span>http<span class="token punctuation">.</span>interceptor<span class="token punctuation">.</span><span class="token function-variable function">response</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
		<span class="token keyword">if</span><span class="token punctuation">(</span>res<span class="token punctuation">.</span>code <span class="token operator">==</span> <span class="token number">200</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
			<span class="token comment">// res为服务端返回值，可能有code，result等字段</span>
			<span class="token comment">// 这里对res.result进行返回，将会在this.$u.post(url).then(res =&gt; {})的then回调中的res的到</span>
			<span class="token comment">// 如果配置了originalData为true，请留意这里的返回值</span>
			<span class="token keyword">return</span> res<span class="token punctuation">.</span>result<span class="token punctuation">;</span>
		<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span><span class="token punctuation">(</span>res<span class="token punctuation">.</span>code <span class="token operator">==</span> <span class="token number">201</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
			<span class="token comment">// 假设201为token失效，这里跳转登录</span>
			vm<span class="token punctuation">.</span>$u<span class="token punctuation">.</span><span class="token function">toast</span><span class="token punctuation">(</span><span class="token string">'验证失败，请重新登录'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
			<span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
				<span class="token comment">// 此为uView的方法，详见路由相关文档</span>
				vm<span class="token punctuation">.</span>$u<span class="token punctuation">.</span><span class="token function">route</span><span class="token punctuation">(</span><span class="token string">'/pages/user/login'</span><span class="token punctuation">)</span>
			<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1500</span><span class="token punctuation">)</span>
			<span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
		<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
			<span class="token comment">// 如果返回false，则会调用Promise的reject回调，</span>
			<span class="token comment">// 并将进入this.$u.post(url).then().catch(res=&gt;{})的catch回调中，res为服务端的返回值</span>
			<span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
	<span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
	install
<span class="token punctuation">}</span>
</code></pre></div><p><strong>实践：</strong> 上面写完了请求配置(强烈建议)，请求拦截(可选，推荐)，响应拦截(可选，推荐)，下面为<code>post</code>和<code>get</code>请求的示例：</p> <div class="language-html extra-class"><pre class="language-html"><code>// /pages/index/index.vue

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
	<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
		<span class="token function">onLoad</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
			<span class="token keyword">this</span><span class="token punctuation">.</span>$u<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'/ebapi/store_api/hot_search'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
				<span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">2</span>
			<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
				<span class="token keyword">this</span><span class="token punctuation">.</span>result <span class="token operator">=</span> res<span class="token punctuation">;</span>
			<span class="token punctuation">}</span><span class="token punctuation">)</span>
			
			<span class="token keyword">this</span><span class="token punctuation">.</span>$u<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span><span class="token string">'/ebapi/public_api/index'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
				<span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">1</span>
			<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
				<span class="token keyword">this</span><span class="token punctuation">.</span>result <span class="token operator">=</span> res<span class="token punctuation">;</span>
			<span class="token punctuation">}</span><span class="token punctuation">)</span>
		<span class="token punctuation">}</span>
	<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h3 id="如何使用await进行同步操作"><a href="#如何使用await进行同步操作" class="header-anchor">#</a> 如何使用await进行同步操作</h3> <ul><li>有时候我们需要同步的写法，即下一步的结果依赖于上一步的请求返回结果，当然我们可以把下一步的写法，放入请求的<code>then</code>回调中，
但这是不直观的，比如我们需要打印请求的返回结果，可以这样做：</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
	<span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
		<span class="token function">login</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
			<span class="token comment">// 正确，但是需要在回调中打印</span>
			<span class="token keyword">this</span><span class="token punctuation">.</span>$u<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span><span class="token string">'/user/login'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
				console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span><span class="token punctuation">;</span>
			<span class="token punctuation">}</span><span class="token punctuation">)</span>
			
			<span class="token comment">// 错误，如果想要使用同步的形式，无需then回调，且需要await关键字</span>
			<span class="token keyword">let</span> result <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>$u<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span><span class="token string">'/user/login'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
				console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span><span class="token punctuation">;</span>
			<span class="token punctuation">}</span><span class="token punctuation">)</span>
			console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>result<span class="token punctuation">)</span><span class="token punctuation">;</span>
			
			<span class="token comment">// 错误，无需then回调是对的，但是ret会为undefined，因为登录是一个异步过程(可能需要几十毫秒)</span>
			<span class="token comment">// 下一行打印的时候，请求还没返回，所以ret会为undefined</span>
			<span class="token keyword">let</span> ret <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>$u<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span><span class="token string">'/user/login'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
			console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>ret<span class="token punctuation">)</span><span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
	<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p>上面演示了错误的示例，如果下一步需要依赖上一步的返回结果，并且需要需要同步的写法，我们可以结合&quot;async/await&quot;，
如不理解这个写法，可直接使用，或者搜索相关知识。<br>
说明：我们在某个地方使用<code>await</code>，意味着调用的函数本身或者生命周期，必须要加上<code>async</code>前缀，否则出错</p> <p>此为在onLoad生命周期中的请求示例：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
	<span class="token comment">// 可以放心在生命周期前加上async，不会导致问题</span>
	<span class="token keyword">async</span> <span class="token function">onLoad</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
		<span class="token keyword">let</span> ret <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token keyword">this</span><span class="token punctuation">.</span>$u<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span><span class="token string">'/user/login'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
		<span class="token comment">// 此处在函数体外写了async，并且使用了await等待返回，所以可以打印ret结果</span>
		<span class="token comment">// 意味着这里的console.log是等待了几十毫秒请求返回后才执行的</span>
		console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>ret<span class="token punctuation">)</span><span class="token punctuation">;</span>
	<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p>此为在methods方法中的请求示例：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
	<span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
		<span class="token keyword">async</span> <span class="token function">login</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
			<span class="token keyword">let</span> ret <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token keyword">this</span><span class="token punctuation">.</span>$u<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span><span class="token string">'/user/login'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
			<span class="token comment">// 此处在函数体外写了async，并且使用了await等待返回，所以可以打印ret结果</span>
			<span class="token comment">// 意味着这里的console.log是等待了几十毫秒请求返回后才执行的</span>
			console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>ret<span class="token punctuation">)</span><span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
	<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="api集中管理"><a href="#api集中管理" class="header-anchor">#</a> API集中管理</h3> <p>这里说的集中管理，是指把各个请求，统一放到一个文件中进行管理，这样的好处是不用每次调用<code>this.$u.get</code>时都需要传入<code>url</code>参数，一些固定的
请求参数也可以不用显式的传入，如下为配置后的使用示例：</p> <div class="language- extra-class"><pre class="language-text"><code>this.$u.api.getSearch().then(res =&gt; {
	console.log(res);
})
</code></pre></div><p>此部分内容放到了另外的专题，请移步：<a href="apiManage.html">API集中管理</a></p> <h3 id="完整示例"><a href="#完整示例" class="header-anchor">#</a> 完整示例</h3> <p>如果您不想阅读上方的内容的，或者觉得繁琐，下面给出一个完整的示例，复制修改某些提示的值即可直接使用</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// /common/http.interceptor.js</span>

<span class="token comment">// 这里的vm，就是我们在vue文件里面的this，所以我们能在这里获取vuex的变量，比如存放在里面的token变量</span>
<span class="token keyword">const</span> <span class="token function-variable function">install</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">Vue<span class="token punctuation">,</span> vm</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
	<span class="token comment">// 此为自定义配置参数，具体参数见上方说明</span>
	<span class="token class-name">Vue</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>$u<span class="token punctuation">.</span>http<span class="token punctuation">.</span><span class="token function">setConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
		<span class="token literal-property property">baseUrl</span><span class="token operator">:</span> <span class="token string">'https://api.example.com'</span><span class="token punctuation">,</span>
		<span class="token literal-property property">loadingText</span><span class="token operator">:</span> <span class="token string">'努力加载中~'</span><span class="token punctuation">,</span>
		<span class="token literal-property property">loadingTime</span><span class="token operator">:</span> <span class="token number">800</span><span class="token punctuation">,</span>
		<span class="token comment">// ......</span>
	<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
	
	<span class="token comment">// 请求拦截，配置Token等参数</span>
	<span class="token class-name">Vue</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>$u<span class="token punctuation">.</span>http<span class="token punctuation">.</span>interceptor<span class="token punctuation">.</span><span class="token function-variable function">request</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">config</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
		<span class="token comment">// 引用token</span>
		<span class="token comment">// 方式一，存放在vuex的token，假设使用了uView封装的vuex方式</span>
		<span class="token comment">// 见：https://uviewui.com/components/globalVariable.html</span>
		<span class="token comment">// config.header.token = vm.token;</span>
		
		<span class="token comment">// 方式二，如果没有使用uView封装的vuex方法，那么需要使用$store.state获取</span>
		<span class="token comment">// config.header.token = vm.$store.state.token;</span>
		
		<span class="token comment">// 方式三，如果token放在了globalData，通过getApp().globalData获取</span>
		<span class="token comment">// config.header.token = getApp().globalData.username;</span>
		
		<span class="token comment">// 方式四，如果token放在了Storage本地存储中，拦截是每次请求都执行的</span>
		<span class="token comment">// 所以哪怕您重新登录修改了Storage，下一次的请求将会是最新值</span>
		<span class="token comment">// const token = uni.getStorageSync('token');</span>
		<span class="token comment">// config.header.token = token;</span>
		config<span class="token punctuation">.</span>header<span class="token punctuation">.</span>Token <span class="token operator">=</span> <span class="token string">'xxxxxx'</span><span class="token punctuation">;</span>
		
		<span class="token comment">// 可以对某个url进行特别处理，此url参数为this.$u.get(url)中的url值</span>
		<span class="token keyword">if</span><span class="token punctuation">(</span>config<span class="token punctuation">.</span>url <span class="token operator">==</span> <span class="token string">'/user/login'</span><span class="token punctuation">)</span> config<span class="token punctuation">.</span>header<span class="token punctuation">.</span>noToken <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
		<span class="token comment">// 最后需要将config进行return</span>
		<span class="token keyword">return</span> config<span class="token punctuation">;</span>
		<span class="token comment">// 如果return一个false值，则会取消本次请求</span>
		<span class="token comment">// if(config.url == '/user/rest') return false; // 取消某次请求</span>
	<span class="token punctuation">}</span>
	
	<span class="token comment">// 响应拦截，判断状态码是否通过</span>
	<span class="token class-name">Vue</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>$u<span class="token punctuation">.</span>http<span class="token punctuation">.</span>interceptor<span class="token punctuation">.</span><span class="token function-variable function">response</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
		<span class="token keyword">if</span><span class="token punctuation">(</span>res<span class="token punctuation">.</span>code <span class="token operator">==</span> <span class="token number">200</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
			<span class="token comment">// res为服务端返回值，可能有code，result等字段</span>
			<span class="token comment">// 这里对res.result进行返回，将会在this.$u.post(url).then(res =&gt; {})的then回调中的res的到</span>
			<span class="token comment">// 如果配置了originalData为true，请留意这里的返回值</span>
			<span class="token keyword">return</span> res<span class="token punctuation">.</span>result<span class="token punctuation">;</span>
		<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span><span class="token punctuation">(</span>res<span class="token punctuation">.</span>code <span class="token operator">==</span> <span class="token number">201</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
			<span class="token comment">// 假设201为token失效，这里跳转登录</span>
			vm<span class="token punctuation">.</span>$u<span class="token punctuation">.</span><span class="token function">toast</span><span class="token punctuation">(</span><span class="token string">'验证失败，请重新登录'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
			<span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
				<span class="token comment">// 此为uView的方法，详见路由相关文档</span>
				vm<span class="token punctuation">.</span>$u<span class="token punctuation">.</span><span class="token function">route</span><span class="token punctuation">(</span><span class="token string">'/pages/user/login'</span><span class="token punctuation">)</span>
			<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1500</span><span class="token punctuation">)</span>
			<span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
		<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
			<span class="token comment">// 如果返回false，则会调用Promise的reject回调，</span>
			<span class="token comment">// 并将进入this.$u.post(url).then().catch(res=&gt;{})的catch回调中，res为服务端的返回值</span>
			<span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
	<span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
	install
<span class="token punctuation">}</span>
</code></pre></div><p>具体请求使用示例：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// login.vue</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
	<span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
		<span class="token comment">// post示例</span>
		<span class="token function">sumbitByPost</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
			<span class="token keyword">this</span><span class="token punctuation">.</span>$u<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span><span class="token string">'/user/login'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
				<span class="token literal-property property">username</span><span class="token operator">:</span> <span class="token string">'lisa'</span><span class="token punctuation">,</span>
				<span class="token literal-property property">password</span><span class="token operator">:</span> <span class="token string">'123456'</span>
			<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
				<span class="token comment">// res为服务端返回的数据</span>
			<span class="token punctuation">}</span><span class="token punctuation">)</span>
		<span class="token punctuation">}</span><span class="token punctuation">,</span>
		
		<span class="token comment">// get示例</span>
		<span class="token function">sumbitByGet</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
			<span class="token keyword">this</span><span class="token punctuation">.</span>$u<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'/user/login'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
				<span class="token literal-property property">username</span><span class="token operator">:</span> <span class="token string">'lisa'</span><span class="token punctuation">,</span>
				<span class="token literal-property property">password</span><span class="token operator">:</span> <span class="token string">'123456'</span>
			<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
				<span class="token comment">// res为服务端返回的数据</span>
			<span class="token punctuation">}</span><span class="token punctuation">)</span>
		<span class="token punctuation">}</span><span class="token punctuation">,</span>
	<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div></div> <footer class="page-edit"><!----> <div class="edit-link"><a href="https://gitee.com/vk-uni/vk-uview-ui-doc.git/edit/master/docs/js/http.md" target="_blank" rel="noopener noreferrer">编辑此页（一起来纠错与优化，方便你我Ta）</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <div class="last-updated"><span class="prefix">最后修改时间:</span> <span class="time">7/30/2022, 4:38:24 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="fastUse.html" class="prev">
        便捷工具
      </a></span> <span class="next"><a href="apiManage.html">
        API集中管理
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"></div></div>
		<script src="../assets/js/app.06a5b7ec.js" defer></script><script src="../assets/js/3.b1cc55a0.js" defer></script><script src="../assets/js/4.4b844322.js" defer></script><script src="../assets/js/135.c78b3861.js" defer></script><script src="../assets/js/9.ba52e2b0.js" defer></script><script src="../assets/js/6.2c513bee.js" defer></script>
	</body>

<!-- Mirrored from vkuviewdoc.fsq.pub/js/http.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 21 May 2025 17:31:02 GMT -->
</html>
